<template>
  <div class="timeData">
    <myMap :positions="positions"></myMap>
    <div class="state-type flex-c">
      <p class="ellipsis">
        <a-Checkbox :checked="weiState"
                    style="marginRight:0.1rem"
                    @click="weiState=!weiState" />微型空气站
      </p>
      <p class="ellipsis">
        <a-Checkbox :checked="smallState"
                    style="marginRight:0.1rem"
                    @click="smallState=!smallState" />小型空气站
      </p>
      <p class="ellipsis">
        <a-Checkbox :checked="comState"
                    style="marginRight:0.1rem"
                    @click="comState=!comState" />国控空气站
      </p>
    </div>
    <div class="params flex-c">
      <li v-for="(p, index) in params"
          @click="param=p"
          :class="{chosedParam:p===param}"
          :key="index">{{p}}</li>
    </div>
    <div class="sitInfo">
      <!-- 控制设备信息盒子显示隐藏的 -->
      <div class="togSitDetail"
           @click="showSit=!showSit"
           :class="{reseve:showSit===false}">
        <i class="iconfont icon-qianjin-copy"
           style="fontSize:0.3rem;"></i>
      </div>
      <!-- 显示等级层次的色彩 -->
      <div class="paramRange">
        <img src="../../../assets/img/rang.png">
      </div>
      <!-- 设备信息盒子 -->
      <div class="sitDetail"
           v-show="showSit">
        <div class="sitDetail-header ellipsis">
          <div class="sitDetail-name flex-r"
               style="width:100%;">
            <h2>浦东新区环境监测站</h2>
            <span>设备序列号：XXXXXXXXXXXX</span>
          </div>
          <p class="ellipsis">地址：上海市浦东新区灵山路51号 电话：021-68769261</p>
        </div>
        <!-- 控制设备空气参数值 -->
        <div class="showNum">
          <div>
            <div class="flex-r"
                 style="justifyContent:space-between;float:left">
              <h3>最新数据</h3>
              <span style="transform:scale(0.8);color:rgba(255,255,255,0.8);">(更新于2020.12.12 12:00)</span>
            </div>
            <p style="float:left;color:rgba(255,255,255,0.8);">CO浓度单位为mg/m³ 其他浓度单位为μg/m³</p>
          </div>
          <div class="showNum-info flex-r"
               style="justifyContent:space-between;">
            <div class="showNum-info-left flex-r">
              <div>
                <p>AQI</p>
                <p>42</p>
              </div>
              <div>
                <p>首要污染物</p>
                <p>PM2.5</p>
              </div>
            </div>
            <div class="showNum-info-right flex-r"
                 style="justifyContent:space-between;width:66%;">
              <div>PM2.5：15</div>
              <div>PM10：10</div>
              <div>SO2：2</div>
              <div>NO2：18</div>
              <div>CO：0.6</div>
              <div>O3：66</div>
            </div>
          </div>
        </div>
        <!-- 日期选择器显示图标 -->
        <div class="choseTime flex-r"
             style="justifyContent:space-between;">
          <div>
            <span>显示类型：</span>
            <Select defaultValue="时"
                    style="width: 0.72rem;height:32px;borderRadius:0.04rem;text-align:center;border:1px solid #d9d9d9;color: rgba(255,255,255,0.80);background:#405891;">
              <Option value="时">时</Option>
              <Option value="天">天</Option>
            </Select>
          </div>
          <div style="width:3.4rem;"
               class="flex-r">
            <a-RangePicker :disabledHours="false"
                           :bordered="true"
                           id="dateTime"
                           style="marginRight:0.1rem;" />
            <a-Button type="primary">查询</a-Button>
          </div>
        </div>
        <!-- 选择空气参数 -->
        <div class="chosedEParam flex-r"
             style="justifyContent:flex-end;">
          <div v-for="(param, index) in params"
               :key="index"
               class="flex-r"
               @click="Eparam=param"
               style="cursor:pointer;">
            <div style="width:0.24rem;height:0.02rem;"
                 :style="{background:Eparam===param?'#1890FF':'rgba(255,255,255,0.60)'}"></div>
            <div style="width:0.12rem;height:0.12rem;background:#1890FF;borderRadius:0.06rem;padding:0.02rem;position:relative;left:-0.18rem;"
                 :style="{background:Eparam===param?'#1890FF':'#eee'}">
              <div style="width:0.08rem;height:0.08rem;background:white;borderRadius:0.03rem;"
                   :style="{background:Eparam===param?'white':'#bbb'}"></div>
            </div>
            <span style="marginRight:0.12rem;"
                  :style="{color:Eparam===param?'white':'rgba(255,255,255,0.3)'}">{{param}}</span>
          </div>
        </div>
        <!-- 图表 -->
        <div class="EH">
          <img src="../../../assets/img/实例.png">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myMap from '../../../components/myMap.vue'
export default {
  components: {
    myMap
  },
  data () {
    return {
      showSit: true,
      positions: [
        {
          zoom: { min: 6, max: 10 },
          list: [
            { lat: '32.15235695272106', lng: '117.63758173535156', type: 1 }
          ]
        },
        {
          zoom: { min: 10, max: 12 },
          list: [
            { lat: '32.15245695272106', lng: '118.63748173535156', type: 1 },
            { lat: '31.15245695272106', lng: '115.43748173535156', type: 1 },
            { lat: '33.15245695272106', lng: '104.63748173535156', type: 2 }
          ]
        },
        {
          zoom: { min: 12, max: 18 },
          list: [
            { lat: '30.55245695272106', lng: '117.63747173535156', type: 1 },
            { lat: '30.85245695272106', lng: '115.63748197353515', type: 1 },
            { lat: '33.25245695272106', lng: '144.63748173535156', type: 2 },
            { lat: '32.18245695272106', lng: '127.63748173535156', type: 2 },
            { lat: '30.15255695272106', lng: '105.63748173535156', type: 2 },
            { lat: '33.31245695272106', lng: '119.63748173535156', type: 2 }
          ]
        }
      ],
      weiState: '',
      smallState: false,
      comState: false,
      params: ['AQI', 'PM2.5', 'PM10', 'SO2', 'NO2', 'O3', 'CO'],
      param: 'AQI',
      Eparam: 'AQI'
    }
  }
}
</script>

<style lang="less" scoped>
.timeData {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  .state-type {
    position: absolute;
    padding: 0.12rem;
    top: 0.4rem;
    left: 0.32rem;
    width: 1.44rem;
    font-size: 0.12rem;
    height: 1.46rem;
    border-radius: 0.16rem;
    background: #405891;
    z-index: 99;
    justify-content: space-between;
    p {
      margin: 0;
      padding: 0;
      width: 100%;
      text-align: center;
      input {
        width: 0.2rem;
      }
    }
  }
  .params {
    position: absolute;
    top: 2.16rem;
    left: 0.32rem;
    width: 1.44rem;
    height: 3.32rem;
    border-radius: 0.16rem;
    background: #405891;
    z-index: 99;
    justify-content: space-between;
    padding: 0.08rem;
    li {
      height: 0.4rem;
      width: 1.28rem;
      border-radius: 0.1rem;
      text-align: left;
      padding: 0 0.24rem;
      line-height: 0.4rem;
      cursor: pointer;
    }
    .chosedParam {
      background: #437ede;
    }
  }
  .sitInfo {
    color: white;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: flex-end;
    .togSitDetail {
      width: 0.6rem;
      height: 0.6rem;
      position: absolute;
      top: 50%;
      color: white;
      left: 0.1rem;
      background: rgba(0, 0, 0, 0.12);
      border: 1px solid rgba(0, 0, 0, 0.15);
      transform: tranlateY(-50%);
      border-radius: 50%;
      line-height: 0.6rem;
      text-align: center;
    }
    .togSitDetail:hover {
      color: red;
    }
    .reseve {
      transform: rotate(-180deg);
    }
    .sitDetail {
      position: relative;
      background: #405891;
      width: 5.86rem;
      height: 100%;
      .sitDetail-header {
        width: 100%;
        height: 1.02rem;
        padding: 0.24rem;
        background: #437ede;
        .sitDetail-name {
          h2 {
            color: white;
            font-size: 0.18rem;
          }
          span {
            font-size: 0.12rem;
          }
          justify-content: space-between;
        }
      }
      .showNum {
        padding: 0.24rem;
        font-size: 0.1rem;
        h3 {
          color: white;
          font-size: 0.18rem;
          margin: 0;
        }
        p {
          margin: 0;
        }
        .showNum-info {
          width: 100%;
          padding: 0rem 0;
          .showNum-info-left {
            width: 34%;
            justify-content: space-around;
            div {
              p {
                margin: 0.28rem 0;
                font-size: 0.16rem;
              }
              P:last-child {
                font-size: 0.24rem;
              }
              p:nth-child(3) {
                font-size: 0.24rem;
              }
            }
          }
          .showNum-info-right {
            flex-wrap: wrap;
            justify-content: space-between;
            div {
              text-align: center;
              width: 33.33%;
              margin: 0.18rem 0;
            }
          }
        }
      }
    }
    .paramRange {
      width: 0.68rem;
      height: 2.2rem;
      margin-right: 0.24rem;
      margin-bottom: 0.24rem;
      border-radius: 0.08rem;
      overflow: hidden;
      img {
        height: 100%;
      }
    }
  }
}
.choseTime {
  padding: 0 0.24rem;
  input {
    outline: none;
  }
  .dateTime {
    margin-right: 0.1rem;
    background: #405891;
  }
}
.chosedEParam {
  padding: 0 0.24rem;
  margin: 0.24rem 0;
  font-size: 0.12rem;
  width: 100%;
  flex-wrap: wrap;
}
.EH {
  width: 100%;
  overflow-x: auto;
  position: absolute;
  bottom: 0.1rem;
  @media (max-width: 1440px) {
    height: calc(100% - 5rem);
  }
  @media (min-width: 1440px) {
    height: calc(100% - 4.6rem);
  }
  @media (max-width: 1024px) {
    height: calc(100% - 6rem);
  }
  img {
    width: 200%;
    height: 100%;
  }
}
.EH::-webkit-scrollbar {
  height: 0.1rem;
}
.EH::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.4);
}
.EH::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #405891;
}
</style>
